"use client"
import 'react'
import { Tabs, Card, Image,Button} from 'antd';
import type { TabsProps } from 'antd';
import Link from 'next/link';
import './index.module.css'
import { cn } from "@/lib/util";
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
import { CommentOutlined } from '@ant-design/icons';
import { useState,useEffect,useRef } from "react";
import { useInView } from "framer-motion";
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import SmallText from '@/components/base/UI/SmallText';
import { SetFn } from '@/types';

interface IntroduceItem {
    title: string
    introduce: string
    imgSrc: string
}

/**核心技术 */
export default function Solution() {
    const ref = useRef(null);
    const isInView = useInView(ref, { once: true });
    const virtualLive: IntroduceItem = {
        title: '虚拟视频播报',
        introduce: '提供集形象定制、情感语音合成、语音驱动表情等技术于一体的视频播报解决方案。仅需输入播报文稿，即可获得特定主播的播报视频',
        imgSrc: '/News_Anchor.png'
    }
    
    const groupChat: IntroduceItem = {
        title: 'AI多人群聊',
        introduce: '对低分辨率模糊图像进行去噪，提高图像清晰度和分辨率，可应用在低质图片画质提升等场景',
        imgSrc: '/solution_2.png'
    }
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: (
                <div className='flex flex-col items-center justify-center'>
                    <i className="iconfont icon-zaixianzhibo" style={{ fontSize: '60px' }}></i>
                    <span className='text-[20px]'>虚拟视频播报</span>
                </div>
            ),
            children: (
                <div className='w-full'>
                    <TabChildren data={virtualLive} isInView={isInView}/>
                </div>
            )
        },
        {
            key: '2',
            label: (
                <div className='flex flex-col items-center justify-center'>
                    <CommentOutlined style={{ fontSize: '60px' }}/>
                    <span className='text-[20px]'>AI多人群聊</span>
                </div>
            ),
            children: (
                <div className='w-full'>
                    <TabChildren data={groupChat} isInView={isInView}/>
                </div>
            )
        },
    ]
    const tabBarStyle = {
        marginTop: '50px',
    }
    const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => {
        return <DefaultTabBar {...props} />
    }
    const [activeKey, setActiveKey] = useState('1');
    const tabsRef = useRef<HTMLDivElement | null>(null);
    /**鼠标滑动切换Tabs */
    useEffect(() => {
        if (!tabsRef.current) return;
        const tabs = tabsRef.current.querySelectorAll('.ant-tabs-tab-btn');
        const tabsLength = tabs.length;

        for (let i = 0; i < tabsLength; i++) {
            tabs[i].addEventListener('mousemove', ()=> setActiveKey(JSON.stringify(i+1)))
        }
        return () => {
          if (tabsRef.current) {
            for (let i = 0; i < tabsLength; i++) {
                tabs[i].removeEventListener('mousemove', ()=> setActiveKey(JSON.stringify(i+1)));
              }
          }
        };
      }, []);
    return (
        <>
            <div className='pt-[100px] flex flex-col justify-center items-center' ref={ref}>
                <div className='flex justify-between items-center w-[1100px]'>
                    <div>
                        <div className='text-[40px] font-bold'>解 决 方 案</div>
                        <SmallText size={28}>PRODUCT SOLUTIONS</SmallText>
                    </div>
                    <div className='w-[400px] text-[#868686]'>根据场景需求定制，提供一站式接入流程，直击业务痛点，助力合作伙伴在各细分领域实现专业化</div>
                </div>
                <div ref={tabsRef} >
                    <Tabs centered tabBarStyle={tabBarStyle} activeKey={activeKey} items={items} tabBarGutter={100} style={{ width: '1500px' }} />
                </div>
            </div>
        </>
    )
}

const TabChildren = ({ data,isInView}: { data: IntroduceItem,isInView:boolean}) => {
    return (
        <>
            <Swiper
                className='w-full'
                modules={[Navigation, Pagination, Scrollbar, A11y]}
                slidesPerView={1}
                // navigation
                // pagination={{ clickable: true }}
                // scrollbar={{ draggable: true }}
                onSwiper={(swiper) => console.log(swiper)}
                onSlideChange={() => console.log('slide change')}
                loop
            >
                <SwiperSlide style={{ display: 'flex', justifyContent: 'center' }}>
                    {/* <Link href={`/techDetail?title=${item.title}`}> */}
                        <div className='w-[1200px] h-[600px] rounded-xl' style={{
                            transform: isInView ? "none" : "translateX(300px)",
                            opacity: isInView ? 1 : 0,
                            transition: "all 1s cubic-bezier(0.17, 0.55, 0.55, 1) 0.6s",}}>
                            <div className='w-[1200px] h-[350px] flex items-center z-[-1] rounded-3xl' style={{background:"linear-gradient(-45deg, #fffd91 0%, #fff 60%)",marginTop:"80px"}}>
                                <div className='w-[500px] h-[500px] rounded-full overflow-hidden' 
                                    style={{marginLeft:"80px",
                                            transform: isInView ? "none" : "translateX(-600px)",
                                        opacity: isInView ? 1 : 0,
                                        transition: "all 1s cubic-bezier(0.17, 0.55, 0.55, 1) 0.6s"
                                    }}>
                                    <img className='h-full object-cover' src={data.imgSrc}></img>
                                </div>
                                <div className='w-[500px] h-[220px] right-[100px] bg-transparent' style={{marginLeft:"80px"}}>
                                    <div className="title text-[20px]">{data.title}</div>
                                    <div className="introduce my-[25px] text-[16px] w-full opacity-60">
                                        <p>{data.introduce.substring(0, 30) || ''}</p>
                                        <p className='truncate overflow-ellipsis overflow-hidden'>{data.introduce.substring(30) || ''}</p>
                                    </div>
                                    <Link href={`/solution?title=${data.title}`} className='text-black' >
                                        <Button className='my-5 solutionBtn'>查看详情</Button>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    {/* </Link> */}
                </SwiperSlide>
            </Swiper>
        </>
    )
}